
<html>
<head>
    <title>jqGrid</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <link href="//cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet">
    <link href="//cdn.bootcss.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        .ly-img-preview {
            margin-top: 1em;
        }
        .ly-show-all{
            position: absolute;
            z-index: 2;
            bottom: 0em;
            line-height: 2em;
            width: 100%;
            text-align: center;
            background: linear-gradient(to bottom, transparent, white);
        }
        .ly-img-preview-container{
            height:20em;
            overflow:hidden;
        }
        #outer { height: 100px; border: 1px solid red; position: relative; }
        #copyright { position:absolute; height: 30px; bottom: 0; left: 0; border: 1px solid black; width:300px; }

    </style>
</head>
<body>
<table id="list486"></table>
<button id="plist486">点我点我</button>
<div class="col-sm-1">
    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
        <div class="modal-dialog" style="overflow-x:hidden">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">hahah</h4>
                </div>
                <div class="modal-body">

                    <div class="row ly-img-preview-container">
                        <input type="text" class="form-control"/>
                        <img src="http://static.ruitaowang.com/attached/file/2017/09/01/20170901182817135.jpg" class="img-responsive ly-img-preview">
                        <a class="ly-show-all" href="#">展开全图 <i class="fa fa-angle-double-down"></i></a>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success ly-btn-po">发送</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
</div>
<div class="row">
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
    <div class="col-md-8">.col-sm-8</div>
    <div class="col-md-4">.col-sm-4</div>
</div>
<div class="row">
    <div class="col-xs-6">.col-xs-6</div>
    <div class="col-xs-6">.col-xs-6</div>
</div>
<!-- position -->
</body>
<script src="//cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>

    $('.ly-show-all').click(function(){
        $(".ly-show-all").hide();
        var doms=$(".ly-img-preview-container").children();
        var h=0;
        $.each(doms,function(i,d){
            h+=$(d).height();
        });
        $('.ly-img-preview-container').animate({'height':h}, {queue: false}).css("overflow","scroll");
    });

    $('#plist486').click(function(){
        $('#myModal').modal('show');
    });

</script>
</html>